<template>
	<view class="activateMembership">
		<view class="header">
			<view class="left">
				<image :src="info.portrait" mode=""></image>
				<view class="info">
					<view  class="top">
						{{info.nickName}} <text class="u-p-l-16">({{info.mobile}})</text>
							</view>
					<view class="bot">
						ID：{{info.memberNo}}
					</view>
				</view>
			</view>
			
			<view class="tags" v-if="info"  :class="[GetcardTypeCodeColor(info)]">  {{info.cardTypeName}}
			
			</view>
			
		</view>
		<view class="infoPrev">
			<view class="line">
				<view class="left">
					会员到期时间
				</view>
				<view class="right">
					{{info.vipExpireTime}}
				</view>
			</view>
			<view class="line">
				<view class="left">
					剩余红娘服务次数
				</view>
				<view class="right">
					{{info.serviceCountBalance}}
				</view>
			</view>
			
		</view>
		<view v-if="info.serviceCountBalance" class="dif">
			<view class="title">
				服务类型
			</view>
			<view class="radios">
				<view @click="tab(index,item)" :class="[cur==index?'active':'']" v-for="(item,index) in radiosList" class="items">
					<view class="icon">
						
					</view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 服务内容 -->
		<view v-if="info.serviceCountBalance" class="dif">
			<view class="title">
				服务内容
			</view>
			<view class="intro intro1" >
				<view style="height: 132rpx;">
					<u-input placeholder="填写服务内容" :border="false" :maxlength="300" :height="120" :auto-height="false"
						v-model="remark" type="textarea" />
					
				</view>
				<view class="max">
					{{remark.length}}/300
				</view>
			</view>
		</view>
		
		<!-- 附件上传 -->
		<view v-if="info.serviceCountBalance" class="photos">
			<view class="tit">
				<view class="left">
					<text>附件上传</text>
					<text>（最多3张）</text>
				</view>
				
			</view>
			<view class="">
				<!-- upload-text="上传附件" -->
				<u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="false"
					@on-uploaded="onuploaded" @on-list-change="onchange" @on-remove="onRemove1" :file-list="fileList1"
					@on-success="successUpload1" :form-data="{groupName :'coverImg'}">
				</u-upload>
				
				<!-- <u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="false"
					@on-remove="onRemove1" :file-list="fileList1" @on-success="successUpload1"
					:form-data="{groupName :'coverImg'}">
				</u-upload> -->
			</view>
			
		</view>
		
		
		<view v-if="info.serviceCountBalance" class="botBox">
		
			<view class="item1">
				<u-button :disabled="btnFlags" shape="circle" type="error" @click="submit" :ripple="true" ripple-bg-color="#d7d8da">提交
				</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadFlag: false,
				btnFlags: false,
				authType: '',
				remark:'',
				cur: 0,
				fileList11: [],
				fileList1: [],
				info:null,
				radiosList:[]
			}
		},
		onLoad(e) {
			
			this.getallServiceTypes() //服务类型集合
			this.memberGetFn(e)
		},
		methods: {
			GetcardTypeCodeColor(item){
				if(item.cardTypeCode=='101' ||item.isVip=='0' ){
					return ''
				}else if(item.cardTypeCode=='102' ||item.cardTypeCode=='103' ){
					return 'base'
				}else if(item.cardTypeCode=='104' ||item.cardTypeCode=='105' ){
					return 'golden'
				}else if(item.cardTypeCode=='106' ||item.cardTypeCode=='107' ){
					return 'bojin'
				}else if(item.cardTypeCode=='108' ||item.cardTypeCode=='109' ){
					return 'zuanshi'
				}
			},
			
			memberGetFn(e){
				this.$u.api
					.memberGet({
						keyword:e.keyword,
						type:'SERVICE'
					})
					.then((res) => {
						console.log(res?.data, 77777);
						this.info =res?.data 
						
					});
			},
			getallServiceTypes(){
				
				this.$u.api
					.allServiceTypes()
					.then((res) => {
						console.log(res.data, 77777);
						this.radiosList = res.data
						this.authType = res.data?.[0]?.code
					});
			},
			onchange(lists, name) {
				if (lists.length) {
					this.loadFlag = true
				}
				console.log(lists, name, 333);
			},
			onuploaded(lists, name) {
				if (lists.length) {
					this.fileList11 = lists?.map(r => {
						return r?.response?.data
					})
					
					
					
					
					let query = {
						memberId: this.info?.id,
						serviceType: this.authType,
						description: this.remark,
						fileList: this.fileList11
					}
					this.$u.api
						.serviceRecordAdd(query)
						.then((res) => {
							if (res.code == 'ok') {
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.redirectTo({
									url: "/subPack/components/suc?type=2"
								})
							} else {	
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: res.msg,
									duration: 5000
								})
							}
						});
								
								
					
			
			
				} else {
			
					uni.showToast({
						icon: 'none',
						title: "请上传支付截图"
					})
			
					
				}
			
			
			},
			submit() {
			
	
				if (!this.authType) {
					this.$u.toast('认证类型不可为空');
					return
				}
				
				if (this.loadFlag) {
					this.$refs.uUpload.upload();
					uni.showLoading({
						title: '加载中...'
					})
					this.btnFlags = true
				} else {
					this.$refs.uUpload.upload();
				}
			

			// 	let query = {
			// 		memberId: this.info?.id,
			// 		serviceType: this.authType,
			// 		description: this.remark,
			// 		fileList: this.fileList11
			// 	}
			// 	this.$u.api
			// 		.serviceRecordAdd(query)
			// 		.then((res) => {
			// 			if (res.code == 'ok') {
			// 				uni.redirectTo({
			// 					url: "/subPack/components/suc?type=2"
			// 				})
			// 			} else {		
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: res.msg,
			// 					duration: 5000
			// 				})
			// 			}
			// 		});
			
			},
			tab(index,item) {
				this.cur = index
				this.authType = item?.code
			},
			
			successUpload1(data, index, lists) {
				let url = data.data;
				this.fileList11.push(url);
				
			},
			onRemove1(index) {
				this.fileList11.splice(index, 1);
				
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-input__textarea{
		height: 66px !important;
		text-align: left !important; 
	}
	.activateMembership {
		padding: 0 40rpx;
		.radios{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #0F1417;
			line-height: 33rpx;
			padding-right: 50rpx;
			.items{
				display: flex;
				align-items: center;
				.icon{
					display: block;
					width: 32rpx;
					height: 32rpx;
					margin-right: 24rpx;
					background: url('https://oss.6mate.cn/mini/nocheck1.png') no-repeat;
					background-size: cover;
				}
				&.active{
					.icon{
					background: url('https://oss.6mate.cn/mini/check1.png') no-repeat;
					background-size: cover;
					}
				}
			}
		}
		.botBox {
			padding: 42rpx 0;
			// z-index: 998;
			// position: fixed;
			// left: 40rpx;
			// bottom: 90rpx;
			// padding-bottom: env(safe-area-inset-bottom);
			// right: 40rpx;
		
			.item1 {
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			}
		}
		
		.intro {
			
			padding: 6rpx 16rpx 0;
			
			background: #F1F1F1;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			&.intro1{
				height: 176rpx;
				// margin-top: 24rpx;
			}
		
			/deep/ .u-input__input {
				text-align: left !important;
				// margin-right: 24rpx;
			}
		
			/deep/ textarea,
			uni-textarea {
				height: 60px;
			}
		
			.max {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.4);
				line-height: 28rpx;
				text-align: right;
			}
		}
		
		.photos {
			background: #FFFFFF;
			padding: 24rpx 0 0; 
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// margin-bottom: 24rpx;
		
			.open {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
			}
		
			.tit {
				margin-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.left {
					display: flex;
					align-items: center;
		
					>text:nth-child(1) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
					}
		
					>text:nth-child(2) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 28rpx;
					}
				}
		
				.right {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 28rpx;
				}
			}
		}
		.title {
			padding: 24rpx 0 16rpx;
		}

		.infoPrev {
			padding: 8rpx 0;
			border-bottom: 2rpx solid  #F5F5F5;
			.line{
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;
				}
				.right{
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(15,20,23,0.6);
					line-height: 33rpx;
				}
			}
		}
		// border-bottom: 2rpx solid #F5F5F5;

		.header {
			padding-bottom: 24rpx;
			
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 93rpx;
					height: 93rpx;
					margin-right: 26rpx;
					border-radius: 50%;
				}

				.info {
					flex: 1;

					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
						margin-bottom: 8rpx;
					}

					.bot {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.6);
					}
				}
			}

			.tags {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F1417;
				line-height: 20rpx;
				color: #0F1417;
				background: #EDEFF0;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				padding: 8rpx 16rpx;

				&.base {
					color: #E7EDF4 !important;
					background: #252E3C !important;
				}

				&.golden {
					color: #FFE1CF !important;
					background: #A06D08 !important;
				}

				&.baijin {
					color: #FFE1CF !important;
					background: #4B1C00 !important;
				}

				&.zuanshi {
					color: #D0EAF9 !important;
					background: #3E5980 !important;
				}
			}
		}
	}
</style>
